<template>
  <view class="view-container">
    <view v-if="paySuccess" class="main-container">
      <image
        :src="`${baseimgUrl}/success.png`"
        mode="aspectFit"
        style="width: 164rpx;height: 212rpx;"
      />
      <text class="pay-status">支付成功</text>
      <text class="pay-text">正在安排鉴定，请保持手机畅通，可能会有鉴定师跟您联系~</text>
      <button
        @click="goHome"
        style="width: 362rpx;height: 91rpx;border-radius: 8rpx;border: 2rpx solid #953B82;margin-top: 58rpx;"
      >
        返回首页
      </button>
    </view>
    <view v-else class="main-container">
      <image
        :src="`${baseimgUrl}/error.png`"
        mode="aspectFit"
        style="width: 164rpx;height: 212rpx;"
      />
      <text class="pay-status">支付失败</text>
      <text class="pay-text">您到鉴定申请已保存，可以到"我的-鉴定数"中查看订单并重新付款</text>
      <button
        @click="goList"
        style="width: 362rpx;height: 91rpx;border-radius: 8rpx;border: 2rpx solid #953B82;margin-top: 58rpx;"
      >
        查看订单
      </button>
    </view>
  </view>
</template>

<script lang="ts" setup>
  import { onLoad } from "@dcloudio/uni-app"
  import { inject, ref } from 'vue'
  import { fetchDetail } from '@/api/jianding'
  const imgUrl = inject("$baseimgurl")
  const baseimgUrl = ref("")
  baseimgUrl.value = imgUrl
  const paySuccess = ref(false)

  onLoad(options => {
    if (options.orderNo) {
      getPayDetail(options.orderNo)
    }
  })

  const getPayDetail = async (orderNo) => {
    const { code, data, msg } = await fetchDetail({orderNum: orderNo})
    if (code === '1') {
      if (data.orderStatus === 'payment') {
        paySuccess.value = true
      }
    } else {
      uni.showToast({
        title: msg,
        icon: 'none',
      })
    }
  }

  const goHome = () => {
    uni.reLaunch({ url: '/pages/bar' })
  }

  const goList = () => {
    uni.reLaunch({ url: '/pages/jianding/list' })
  }
</script>

<style scoped>
  .view-container {
    width: 100%;
    height: 100%;
  }
  .view-container .main-container {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
  }
  .view-container .main-container  image {
    margin: 0 auto;
  }
  .pay-status {
    height: 43rpx;
    font-size: 31rpx;
    font-family: PingFangSC, PingFang SC;
    font-weight: 500;
    color: #333854;
  }
  .pay-text {
    width: 576rpx;
    margin: 0 auto;
    font-size: 25rpx;
    color: #8A8F99;
  }
</style>
